<template>
  <!-- 表单 -->
  <!-- .lazy 在input失去焦点时才更新searchKey的值，change事件，节省性能 -->
  <input type="text" v-model.lazy="searchKey" />在input失去焦点时才更新
  <h1>{{ searchKey }}</h1>

  <input
    type="text"
    v-model.number="searchKey1"
    @keydown.enter="event1"
  />输入转换为number类型
  <h1>{{ searchKey1 }}</h1>

  <input
    type="text"
    v-model.trim="searchKey2"
    @keydown.enter="event2"
  />输入去除首尾空格
  <h1>{{ searchKey2 }}</h1>

  <textarea
    v-model="lineText"
    name="textarea"
    id=""
    cols="30"
    rows="10"
  ></textarea>

  <!-- 复选框 -->
  <input type="checkbox" name="likes" v-model="checked" value="apple" />
  <input type="checkbox" name="likes" v-model="checked" value="banana" />
  <input type="checkbox" name="likes" v-model="checked" value="watermelon" />
  <h1>{{ checked }}</h1>

  <!-- 单选框 -->
  <input type="radio" name="sex" v-model="picked" value="boy" />
  <input type="radio" name="sex" v-model="picked" value="girl" />
  <h1>{{ picked }}</h1>

  <!-- 下拉框 -->
  <!-- multiple多选 -->
  <select name="city" v-model="cityName" multiple>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="福州">福州</option>
    <option value="厦门">厦门</option>
    <option value="厦门2">厦门2</option>
    <option value="厦门3">厦门3</option>
    <option value="厦门4">厦门4</option>
  </select>
  <h1>{{ cityName }}</h1>

  <input
    type="checkbox"
    name="fruits"
    v-model="checked1"
    true-value="watermelon"
    false-value="apple"
  />
  <!-- 选中时checked1为watermelon，反之为apple -->
  <h1>{{ checked1 }}</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      searchKey: "百度一下",
      searchKey1: 0,
      searchKey2: "",
      lineText: "aa",
      checked: [],
      picked: "",
      cityName: [],
      checked1: "",
    };
  },
  methods: {
    event1() {
      console.log(this.searchKey1);
    },
    event2() {
      console.log(this.searchKey2);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>
